import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {tdRefuseStatisticsAction} from './index';
import {CommonTable} from 'components';
import SearchList from './SearchList/SearchList';
import moment from 'moment';
import { Icon, Tooltip, Modal, Table } from 'antd';
import { axios } from 'utils';

class TdRefuseStatistics extends Component {

    constructor(props) {
        super(props);
        const _this = this;
        this.state = {
            visible: false,
            data: [],
            tableLoad: false,
            columns: [
                {title: '命中规则', dataIndex: 'refusedReason', key: 'refusedReason'},
                {
                    title: '命中量',
                    dataIndex: 'num',
                    key: 'num',
                    defaultSortOrder: 'descend',
                    sorter: (a, b) => {
                        return (a.num - b.num);
                    }
                },
                {title: '被拒数量', dataIndex: 'totalCount', key: 'totalCount'},
                {title: '命中占比', dataIndex: 'rate', key: 'rate'},
                {
                    title: '操作',
                    render(text) {
                        return (
                            <Tooltip title={'查看详情'}>
                                <div onClick={() => _this.handleLook(text.refusedReason)} style={{cursor: 'pointer'}}>
                                    <Icon type="exception" />
                                </div>
                            </Tooltip>
                        );
                    }
                }
            ],
            tableColumn: [{
                title: '被拒原因',
                dataIndex: 'remark',
                key: 'remark'
            }, {
                title: '命中量',
                dataIndex: 'num',
                key: 'aaa'
            }]
        };
        this.initTime = [
            moment(),
            moment()
        ];
    }

    handleSearch = (obj) => {
        const {time } = obj;
        const { getTableData } = this.props;
        const isArr = Array.isArray(time) && time.length > 0;
        const params = {
            startTime: isArr ? time[0].format('YYYY-MM-DD') : '',
            endTime: isArr ? time[1].format('YYYY-MM-DD') : ''
        }
        this.setState({
            params
        })
        getTableData(params);
    }

    handleLook = (text) => {
        this.setState({
            tableLoad: true
        })
        const { params } = this.state
        const data = {
            startTime: params ? params.startTime : (this.initTime && this.initTime[0] ? this.initTime[0].format('YYYY-MM-DD') : ''),
            endTime: params ? params.endTime : (this.initTime && this.initTime[1] ? this.initTime[1].format('YYYY-MM-DD') : ''),
            ruleName: text
        }
        axios({
            url: '/hs/admin/statistics/refusedReasonDetail',
            method: 'post',
            data: data
        }).then((res) => {
            if(res.code === 200){
                if(res.data){
                    res.data.map((item)=>{
                        item.key = item.remark
                    })
                    this.setState({
                        data:res.data,
                        tableLoad: false
                    })
                }
            }else{
                this.setState({
                    data: [],
                    tableLoad: false
                })
            }
        })
        this.setState({
            visible: true
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    componentDidMount() {
        const {getTableData} = this.props;
        getTableData({
            startTime: this.initTime[0].format('YYYY-MM-DD'),
            endTime: this.initTime[1].format('YYYY-MM-DD')
        });
        this.setState({
            params: {
                startTime: this.initTime[0].format('YYYY-MM-DD'),
                endTime: this.initTime[1].format('YYYY-MM-DD')
            }
        })
    }

    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData([]);
    }


    render() {
        const {tableData, loading} = this.props;
        const {visible, data, tableColumn, columns, tableLoad} = this.state;
        return (
            <div>
                <div>
                    <SearchList initTime={this.initTime} handleSearch={this.handleSearch}/>
                    <CommonTable columns={columns} dataSource={tableData} loading={loading}/>
                </div>

                <Modal
                onCancel={this.handleCancel}
                width={800}
                visible={visible}
                footer={null}
                title={'查看详情'}
                >
                    <Table
                        columns={tableColumn}
                        dataSource={data}
                        bordered
                        pagination={false}
                        loading={tableLoad}
                    />
                </Modal>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const {businessStatisticsState: {tdRefuseStatisticsState}} = state;
    const data = tdRefuseStatisticsState['tableData']
    data.map((item) => {
        item.key = item.refusedReason
    })
    return {
        tableData: data,
        loading: tdRefuseStatisticsState['loading']
    };
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: tdRefuseStatisticsAction.trsGetTableData,
        setTableData: tdRefuseStatisticsAction.trsSetTableData
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(TdRefuseStatistics);
